<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main" style="height: 400px; width: 600px"></div>
    <script src="./assets/lib/echarts/echarts.min.js"></script>

    <script>
        // 直接初始化
        const myChart = echarts.init(document.querySelector('#main'))

        // 指定图表的配置项和数据
        const option = {
            // 线条颜色
            color: ['red', 'blue'],
            title: {
                text: '薪资折线图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},

            // 拖动  类似滚动条
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 10,
                },
                {
                    // 滑块开始的位置
                    start: 20,
                    // 滑块结束的位置
                    end: 30
                }
            ],

            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} '
                }
            },
            series: [
                {
                    name: '期望薪资',
                    type: 'line',
                    data: [10, 11, 13, 11, 12, 12, 9],
                    // 设置线条平滑
                    smooth: true,
                    // 设置图裂  实心圆
                    symbol: "circle",
                    /*  // 线条颜色
                     color: "red" */


                },
                {
                    name: '实际薪资',
                    type: 'line',
                    data: [1, -2, 2, 5, 3, 2, 0],
                    // 设置线条平滑
                    smooth: true,
                    // 设置图裂  实心圆
                    symbol: "circle",
                    /*   // 线条颜色
                      color: "blue" */



                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>

</body>

</html>